<!--
  Generated template for the PolicyFilterPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="goBack()">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            个险保单列表筛选
        </ion-title>
        <!--<ion-buttons end>-->
            <!--<button ion-button icon-only (click)="openMenu($event)">-->
                <!--<i class="toolbar-menu"></i>-->
            <!--</button>-->
        <!--</ion-buttons>-->
    </ion-toolbar>

</ion-header>


<ion-content class="content-body" (click)="makeBlur($event)">

    <div class="zx-name">
        <div class="zx-name-title">
            <span>主险名称</span>
            <i [ngClass]="mainRiskExpand ? 'expand-icon' : 'close-icon'" (click)="expandMainRisk()"></i>
        </div>
        <div class="zx-name-content" *ngIf="mainRiskExpand">
            <div class="zx-name-item">
                <span (click)="changeStatus('cbfxRisk')" [ngClass]="cbfxRisk ? 'zx-name-item-l-active' : 'zx-name-item-l'">长保福星</span>
                <span (click)="changeStatus('cbakRisk')" [ngClass]="cbakRisk ? 'zx-name-item-r-active':'zx-name-item-r'">长保安康</span>
            </div>
            <div class="zx-name-item">
                <span (click)="changeStatus('cbfxzxbRisk')" [ngClass]="cbfxzxbRisk ? 'zx-name-item-l-active' : 'zx-name-item-l'">长保福星尊享版</span>
                <span (click)="changeStatus('cbakzxbRisk')" [ngClass]="cbakzxbRisk ? 'zx-name-item-r-active':'zx-name-item-r'">长保安康尊享版</span>
            </div>
            <div class="zx-name-item">
                <span (click)="changeStatus('otherRisk')" [ngClass]="otherRisk ? 'zx-name-item-l-active' : 'zx-name-item-l'">其它</span>
            </div>
        </div>
    </div>

    <div class="date-range">
        <div class="date-range-title">
            <span>保单生效日范围</span>
            <!--<span *ngIf="effectiveStartTime || effectiveEndTime" (click)="clearEffectiveDate()" style="font-size: 3.5vw;color: #da5c56;margin-left: 3vw">清除</span>-->
            <span *ngIf="effectiveStartTime || effectiveEndTime" (click)="clearEffectiveDate()" style="font-size: 3.5vw;color: #da5c56;margin-left: 3vw;float: right;margin-top: 1vw">清除</span>
        </div>
        <div class="date-range-input">
            <span class="date-range-input-l">
                <!--<input type="text" placeholder="2018/01/01" />-->
                <ion-datetime [ngClass]="effectiveDateValidStatus ? 'date-normal':'date-error'" cancelText="取消" doneText="确定" max="2100" yearValues="{{yearList}}" displayFormat="YYYY/MM/DD" (click)="scrollTo($event)" [(ngModel)]="effectiveStartTime" (ionChange)="validEffectiveDate($event)" [pickerOptions]="pickerOptions"></ion-datetime>
            </span>
            <span class="date-range-input-line"></span>
            <span class="date-range-input-r" style="float: right">
                <!--<input type="text" placeholder="2018/01/01" />-->
                <ion-datetime [ngClass]="effectiveDateValidStatus ? 'date-normal':'date-error'" cancelText="取消" doneText="确定" max="2100" yearValues="{{yearList}}" displayFormat="YYYY/MM/DD" (click)="scrollTo($event)" [(ngModel)]="effectiveEndTime" (ionChange)="validEffectiveDate($event)" [pickerOptions]="pickerOptions"></ion-datetime>
            </span>
        </div>
    </div>

    <div class="date-range">
        <div class="date-range-title">
            <span>下期应缴保费日范围</span>
            <span *ngIf="paymentStartTime || paymentEndTime" (click)="clearPaymentDate()" style="font-size: 3.5vw;color: #da5c56;margin-left: 3vw;float: right;margin-top: 1vw">清除</span>
        </div>
        <div class="date-range-input">
            <span class="date-range-input-l">
                <!--<input type="text" placeholder="2018/01/01" />-->
                <ion-datetime [ngClass]="paymentDateValidStatus ? 'date-normal':'date-error'" cancelText="取消" doneText="确定"  max="2100" yearValues="{{yearList}}" displayFormat="YYYY/MM/DD" (click)="scrollTo($event)" [(ngModel)]="paymentStartTime" (ionChange)="validPaymentDate($event)" [pickerOptions]="pickerOptions"></ion-datetime>
            </span>
            <span class="date-range-input-line"></span>
            <span class="date-range-input-r" style="float: right">
                <!--<input type="text" placeholder="2018/01/01" />-->
                <ion-datetime [ngClass]="paymentDateValidStatus ? 'date-normal':'date-error'" cancelText="取消" doneText="确定"  max="2100" yearValues="{{yearList}}" displayFormat="YYYY/MM/DD" (click)="scrollTo($event)" [(ngModel)]="paymentEndTime" (ionChange)="validPaymentDate($event)" [pickerOptions]="pickerOptions"></ion-datetime>
            </span>
        </div>
    </div>

    <div class="date-range">
        <div class="date-range-title">
            <span>年缴保费范围</span>
        </div>
        <div class="date-range-input-s">
            <span class="date-range-input-l"><ion-input pattern="[0-9]*" [ngClass]="annualValidPremiumStatus ? 'input-normal':'input-error'" type="text" (ionChange)="checkInteger($event)" (ionBlur)="validAnnualPremium($event)" (focus)="scrollTo2($event)" [(ngModel)]="annualPremiumStart"></ion-input></span>
            <span style="display: block;float: left;margin-left: 2vw;margin-top: 1vw;color: #666">元</span>
            <span class="date-range-input-line moneyLine"></span>
            <span style="display: block;float: right;margin-left: 2vw;margin-top: 1vw;color: #666">元</span>
            <span class="date-range-input-r"><ion-input pattern="[0-9]*" [ngClass]="annualValidPremiumStatus ? 'input-normal':'input-error'" type="text" (ionChange)="checkInteger($event)" (ionBlur)="validAnnualPremium($event)" (focus)="scrollTo2($event)" [(ngModel)]="annualPremiumEnd"></ion-input></span>
        </div>
    </div>

    <div class="zx-name">
        <div class="zx-name-title">
            <span>保单状态</span>
            <i [ngClass]="policyStatusExpand ? 'expand-icon' : 'close-icon'" (click)="expandPolicyStatus()"></i>
        </div>
        <div class="zx-name-content" *ngIf="policyStatusExpand">
            <div class="zx-name-item">
                <span (click)="changeStatus('jfqnPolicy')" [ngClass]="jfqnPolicy ? 'zx-name-item-l-active' : 'zx-name-item-l'">缴费期内</span>
                <span (click)="changeStatus('hmbfPolicy')" [ngClass]="hmbfPolicy ? 'zx-name-item-r-active':'zx-name-item-r'">豁免保费</span>
            </div>
            <div class="zx-name-item">
                <span (click)="changeStatus('bfyjqPolicy')" [ngClass]="bfyjqPolicy ? 'zx-name-item-l-active' : 'zx-name-item-l'">保费已缴清</span>
                <span (click)="changeStatus('jejqPolicy')" [ngClass]="jejqPolicy ? 'zx-name-item-r-active':'zx-name-item-r'">减额缴清</span>
            </div>
            <div class="zx-name-item">
                <span (click)="changeStatus('htqmPolicy')" [ngClass]="htqmPolicy ? 'zx-name-item-l-active' : 'zx-name-item-l'">合同期满</span>
                <span (click)="changeStatus('otherPolicy')" [ngClass]="otherPolicy ? 'zx-name-item-r-active':'zx-name-item-r'">其它状态</span>
            </div>
        </div>
    </div>

    <div class="self-search">
        <div class="self-search-title">
            <span>自定义搜索</span>
        </div>

        <div class="self-search-content">
            <div class="search-key-wrapper">
                <ion-input type="text" placeholder="姓名/保单号/主险名称" (focus)="scrollTo2($event)" [(ngModel)]="selfKeyword"></ion-input>
                <!--<i></i>-->
            </div>
        </div>
    </div>

</ion-content>

<ion-footer>
    <div>
        <button class="footer-cancel" (click)="resetFilter()">重置</button>
        <button [ngClass]="allValidResult ? 'footer-ok':'footer-ok-disabled'" (click)="completeFilter()" [disabled]="!allValidResult">查询</button>
    </div>
</ion-footer>


